<template>
  <view class="container">
    <view class="main">
      <view class="block statusInfo mbom30">
        <view class="fl">
          <image class="status-icon" src="/static/images/sts1.png" mode=""></image>
          <view class="status-label">{{orderDetail._status._type<0?'已退款':statusEnum[orderDetail._status._type]}}</view>
        </view>
        <view class="usePayTime" v-if="orderDetail._status._type == 0">
          剩余支付时长 <uv-count-down :time="orderDetail.timeStamp" format="HH:mm:ss"></uv-count-down>
        </view>
       <view class="logistics" v-if="orderDetail._status._type > 1" @click="toLogistPage" style="font-weight: 400;font-size: 28rpx;color: #EA7222;">
          物流追踪
        </view>
      </view>
      <view class="block addressInfo mbom30">
        <view class="title">
          {{orderDetail.real_name}}  {{orderDetail.user_phone}}
        </view>
        <view class="address">
          <view>{{orderDetail.user_address}}</view>
        </view>
      </view>
      <view class="block goodsInfo mbom30">
        <view class="title">
          商品清单
        </view>
        <view class="goodsMenu">
          <view class="goods-item" v-for="(item, index) in orderDetail.cartInfo" :key="index">
            <image class="goodsImg" :src="item.productInfo.image" mode=""></image>
            <view class="goodsInfo">
              <view class="goodsName text-twoline-ellipsis">
                {{item.productInfo.store_name}}
              </view>
              <view class="foot">
                <view class="price">
                  ￥{{item.productInfo.price}}
                </view>
                <view class="count">
                  x{{item.cart_num}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="block">
        <view class="block-title" style="margin-bottom: 20rpx;">
          订单信息
        </view>
        <view class="block-item">
          <view class="label">
            订单编号：
          </view>
          <view class="value">
            {{orderDetail.order_id}}
          </view>
        </view>
        <view class="block-item">
          <view class="label">
            下单时间：
          </view>
          <view class="value">
            {{orderDetail.add_time}}
          </view>
        </view>
      </view>
    
    </view>
    <view style="width: 100%;height: 176rpx;"></view>
    <view class="footer-block">
      <view class="fl" v-if="orderDetail._status._type == 0">
        <text class="label">待付款: </text>
        <text class="value">￥{{orderDetail.pay_price}}</text>
      </view>
      <view class="fr">
        <view class="btn1" v-if="orderDetail._status._type == 0" @click="cancel">
          取消订单
        </view>
        <view class="btn2" v-if="orderDetail._status._type == 0" @click="toPay">
          去支付
        </view>
       <view class="btn2" v-if="orderDetail._status._type == 1 && orderDetail.refund.length == 0" @click="toRefund">
          申请退款
        </view>
        <view class="btn2" v-if="orderDetail._status._type == 2 && orderDetail.refund.length == 0" @click="toRefund">
          申请退款
        </view>
        <view class="btn2" v-if="orderDetail._status._type == 2" @click="receipt">
          确认收货
        </view>
      </view>
    </view>
    <uv-modal ref="modal" title="确认取消订单吗？" :showCancelButton="true" @confirm="confirm"></uv-modal>
    <uv-modal ref="modal2" title="确认收货吗？" :showCancelButton="true" @confirm="confirm2"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default{
    data(){
      return{
        orderDetail: {
          _status: {
           _type: 0
          },
          timeStamp: 17261655,
          real_name: "小明",
          user_phone: "15102122247",
          user_address: "河南省郑州市中牟县白沙镇",
          cartInfo: [
            {
              productInfo: {
                image: "/static/images/cate.png",
                store_name: "元槲｜天麻原浆本草｜精道心眠 养生佳品适合中老年人",
                price: "68"
              }
            }
          ],
          cart_num: 1,
          pay_price: "68",
          order_id: "kh266226",
          add_time: "2024-11-06 15:17"
        },
        statusEnum: {
          0: "待付款",
          1: "待发货",
          2: "待收货",
          3: "待评价",
          4: "已完成"
        },
        payParams: {
          uni: "", //订单编号
          paytype: "", //支付方式
          code: "" //微信支付code
        }
      }
    },
    onLoad(option) {
      this.getDetail(option.id);
    },
    methods: {
      toPay(item) {
        uni.navigateTo({
          url: `/pages/home/cashier?id=${this.orderDetail.order_id}`
        })
      },
      toRate(item) {
        // 加密唯一值，评论会用
        // let unique = this.orderDetail.cartInfo[0].unique;
        uni.redirectTo({
          url: `/pages/subpack/mine/evaluate?unique=${this.orderDetail.cartInfo[0].unique}&orderNo=${this.orderDetail.order_id}`
        })
      },
      receipt(item){
        this.$refs.modal2.open();
      },
      confirm2(){
        console.log('确定收货');
        reqApi.takeOrder({uni: this.orderDetail.order_id}).then(res=>{
          this.$refs.modal2.close();
          uni.showToast({
            title: "收货成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.getDetail(this.orderDetail.order_id);
          }, 1000)
        })
      },
      cancel() {
        this.$refs.modal.open();
      },
      confirm() {
        console.log('确定取消');
        reqApi.cancelOrder({
          id: this.orderDetail.order_id
        }).then(res => {
          uni.showToast({
            title: "取消成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            uni.navigateBack({delta: 1});
          }, 1000)
        })
      },
      toRefund(item) {
        uni.redirectTo({
          url: `/pages/subpack/mine/refund?orderNo=${this.orderDetail.order_id}&id=${this.orderDetail.id}`
        })
      },
      getDetail(id){
        console.log("详情id", id);
        reqApi.orderDetail({uni: id}).then(res=>{
          res.data.timeStamp = res.data.stop_time*1000 - new Date().getTime();
          this.orderDetail = res.data;
          this.payParams.uni = res.data.order_id;
          console.log("商品详情", this.orderDetail);
        })
      },
      toLogistPage(){
        uni.navigateTo({
          url: `/pages/subpack/mine/logisticsInfo?id=${this.orderDetail.order_id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .block-title{
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }
  .block-item:last-child{
    margin-bottom: 0;
  }
  .block-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    .label{
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
    }
    .value{
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .mbom30{
    margin-bottom: 30rpx;
  }
  .container{
    .main{
      padding: 30rpx;
      box-sizing: border-box;
      .block{
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 16rpx;
      }
      .statusInfo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .fl{
          display: flex;
          align-items: center;
          .status-icon{
            width: 100rpx;
            height: 100rpx;
            margin-right: 20rpx;
          }
          .status-label{
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
          }
        }
        .usePayTime{
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #EA2222;
        }
      }
      .addressInfo{
        .title{
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
        }
        .address{
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
        }
      }
      .goodsInfo{
        .title{
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }
        .goodsMenu{
          .goods-item{
            margin-top: 30rpx;
            display: flex;
            .goodsImg{
              width: 160rpx;
              height: 160rpx;
              border-radius: 20rpx;
              margin-right: 20rpx;
            }
            .goodsInfo{
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              .goodsName{
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #333333;
              }
              .foot{
                display: flex;
                justify-content: space-between;
                .price{
                  font-family: PingFang SC, PingFang SC;
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #EA2222;
                }
                .count{
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #AAAAAA;
                }
              }
            }
          }
        }
      }
      .couponInfo{
        
      }
    }
    .footer-block{
      padding: 40rpx 30rpx;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      justify-content: space-between;
      position: fixed;
      width: 100%;
      bottom: 0;
      .fl{
        display: flex;
        align-items: center;
        .label{
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #333333;
        }
        .value{
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #EA2222;
        }
      }
      .fr{
        display: flex;
        flex: 1;
        justify-content: flex-end;
        .btn1{
          width: 180rpx;
          height: 80rpx;
          border-radius: 74rpx;
          border: 2rpx solid #EA7222;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #EA7222;
          text-align: center;
          line-height: 80rpx;
          margin-left: 30rpx;
        }
        .btn2{
          width: 180rpx;
          height: 80rpx;
          background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
          border-radius: 74rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #FFFFFF;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 80rpx;
          margin-left: 30rpx;
        }
      }
      
    }
  }
</style>